<template>
  <div>
    <VxeTableVue
      ref="tableEl"
      :column-config="columnConfig"
      :query-form-data="state.formData"
      data-list-api="/notice/page"
      :show-action-column="false"
      :on-active-query="true"
      :on-mounted-query="false"
      :show-top-add-btn="false"
      :show-del-btn="false"
    >
      <!------------------------------------------ 查询 ------------------------------------------------------->

      <template #queryItem>
        <el-form-item label="标题/内容" class="mgr30">
          <el-input v-model="state.formData.params.keyword" style="width: 170px" placeholder="请输入标题或内容" clearable />
        </el-form-item>
        <el-form-item label="类型" prop="type" class="mgr30">
          <SelectVue
            v-model="state.formData.type"
            :teleported="false"
            :option-list="[
              { name: '服务维护', id: '0' },
              { name: '故障警告', id: '1' }
            ]"
            clearable
            style="width: 130px"
          />
        </el-form-item>
        <el-form-item label="阅读状态" prop="status" class="mgr30">
          <SelectVue
            v-model="state.formData.status"
            :teleported="false"
            :option-list="[
              { name: '未读', id: '0' },
              { name: '已读 ', id: '1' }
            ]"
            clearable
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="通知渠道" prop="channel" class="mgr30">
          <SelectVue
            v-model="state.formData.channel"
            :teleported="false"
            :option-list="[
              { name: '站内', id: '0' },
              { name: '钉钉', id: '1' }
            ]"
            clearable
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="发送时间" class="mgr30">
          <DatePickVue v-model:start-time="state.formData.params.startTime" v-model:end-time="state.formData.params.endTime" :teleported="false" style="width: 220px" />
        </el-form-item>
      </template>

      <template #topExtra>
        <el-button type="primary" @click="batchRead">一键已读</el-button>
      </template>

      <!------------------------------------------ 表格列 ------------------------------------------------------->

      <template #type="{ row }: slotRow">
        <div>{{ row.type === '0' ? '服务维护' : '故障告警' }}</div>
      </template>

      <template #status="{ row }: slotRow">
        <el-tag :type="row.status === '0' ? 'warning' : 'success'">{{ row.status === '0' ? '未读' : '已读' }}</el-tag>
      </template>

      <template #channel="{ row }: slotRow">
        <div>{{ row.channel === '0' ? '站内' : '钉钉' }}</div>
      </template>
    </VxeTableVue>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { type VxeTableViewInstance, VxeTableVue } from '@/components/table'
  import SelectVue from '@/components/select'
  import DatePickVue from '@/components/date-pick'
  import { columnConfig, type slotRow } from './config'
  import request from '@/service'
  import { Ui, emitter } from '@/utils'

  const tableEl = ref<VxeTableViewInstance | null>()

  const state = reactive({
    formData: {
      channel: '',
      status: '',
      type: '',
      params: {
        keyword: '',
        startTime: '',
        endTime: ''
      }
    }
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  const batchRead = () => {
    if (!tableEl.value?.dataList.length) return Ui.useMessage('warning', '没有可读信息')
    request.put('/notice/batchRead').then(res => {
      if (res.code !== 0) return Ui.useMessage('error', res.msg)
      tableEl.value?.query()
      emitter.emit('refleshNotice')
    })
  }

  /**----------------------------lifecycle----------------------------------------------------------------------- */
</script>

<style scoped></style>
